<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>JSONEditor | Item templates</title>

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>

  <style type="text/css">
    body {
      width: 600px;
      font: 11pt sans-serif;
    }
    #jsoneditor {
      width: 100%;
      height: 500px;
    }

  </style>
</head>
<body>
<h1>Item templates</h1>
<p>
  Using item templates, the options in the context menu under "insert" and "append" can be extended with extra options, containing a domain specific template like a "Person", "Contact", "Order", "Address", etc.
</p>

<div id="jsoneditor"></div>

<script>
  const json = [
    {
      firstName: 'John',
      lastName: 'Doe',
      age: 28
    }
  ]

  const options = {
    templates: [
      {
        text: 'Person',
        title: 'Insert a Person Node',
        className: 'jsoneditor-type-object',
        field: 'PersonTemplate',
        value: {
          'firstName': 'John',
          'lastName': 'Do',
          'age': 28
        }
      },
      {
        text: 'Address',
        title: 'Insert a Address Node',
        field: 'AddressTemplate',
        value: {
          'street': '',
          'city': '',
          'state': '',
          'ZIP code': ''
        }
      }
    ]
  }

  // create the editor
  const container = document.getElementById('jsoneditor')
  const editor = new JSONEditor(container, options, json)
  editor.expandAll()
</script>
</body>
</html>
